<template>
  <div class="main-wrapper">
    <div class="main-header-wrapper">
      <n-config-provider class="left-wrapper" :theme-overrides="themeOverrides">
        <n-gradient-text class="title">Vue Admin Work</n-gradient-text>
        <n-space justify="center" class="button-wrapper">
          <n-button type="success" size="large" @click="onPreview">
            <template #icon>
              <n-icon>
                <desktop />
              </n-icon>
            </template>
            在线预览
          </n-button>
          <n-button type="primary" size="large" ghost @click="onPermission">
            <template #icon>
              <n-icon>
                <star />
              </n-icon>
            </template>
            获取授权
          </n-button>
        </n-space>
        <n-gradient-text class="sub-title" @click="onPermission"
          >岂止于此，点击查看其它版本</n-gradient-text
        >
        <n-input v-model:value="inputValue" class="input"> </n-input>
      </n-config-provider>
      <div class="right-wrapper">
        <img :src="bgImg" class="img-wrapper" />
      </div>
    </div>
    <h1 class="h-title">开箱即用的中后台前端框架</h1>
    <div class="card-wrapper">
      <n-card
        class="card"
        v-for="(item, index) of contentList"
        hoverable
        size="huge"
        :key="index"
      >
        <div class="icon-wrapper">
          <n-icon :size="30" class="icon" color="#fff">
            <book v-if="item.icon === 'book'" />
            <flower v-if="item.icon === 'style'" />
            <grid v-if="item.icon === 'layout'" />
            <info v-if="item.icon === 'tech'" />
          </n-icon>
          <div class="bg" :class="['bg_' + item.bgName]" />
        </div>
        <div class="card-title">{{ item.title }}</div>
        <div class="card-content">{{ item.content }}</div>
      </n-card>
    </div>
    <h1 class="h-title">N多特性，为您开发提供最大的便捷</h1>
    <div class="card-1-wrapper">
      <n-card
        class="card1"
        v-for="(item, index) of specialList"
        hoverable
        size="huge"
        :key="index"
      >
        <div class="icon-wrapper">
          <n-icon :size="30" class="icon" color="#fff">
            <book v-if="item.icon === 'book'" />
            <flower v-if="item.icon === 'style'" />
            <grid v-if="item.icon === 'layout'" />
            <info v-if="item.icon === 'tech'" />
            <setting v-if="item.icon === 'permission'" />
            <color v-if="item.icon === 'other'" />
          </n-icon>
          <div class="bg" :class="['bg_' + item.bgName]" />
        </div>
        <div class="card-title">{{ item.title }}</div>
        <div class="card-content">{{ item.content }}</div>
      </n-card>
    </div>
    <n-layout-footer bordered class="footer-wrapper">
      Copyright © 2021 Vue Admin Work
    </n-layout-footer>
  </div>
</template>

<script lang="ts" setup>
import Bannar1 from "../assets/img-1.jpeg";
import Custom from "../assets/custom_weixin.jpg";
import {
  DesktopOutline as Desktop,
  Star,
  BookOutline as Book,
  FlowerOutline as Flower,
  GridOutline as Grid,
  InformationCircleOutline as Info,
  SettingsOutline as Setting,
  ColorPaletteOutline as Color,
} from "@vicons/ionicons5";
import { reactive } from "@vue/reactivity";
import { useRouter } from "vue-router";
import { h, onMounted, ref } from "vue";
import { NButton, useNotification } from "naive-ui";
const bgImg = Bannar1;
const themeOverrides = {
  common: {
    primaryColor: "#ffffff",
    bodyColor: "#ffffff",
    primaryColorHover: "#f00",
  },
};
const inputValue = ref("npm install");
const contentList = [
  {
    title: "常用模板",
    content: "内置常用模板，无需考虑交互排版，助你高效开发",
    icon: "book",
    bgName: "red",
  },
  {
    title: "预设样式",
    content: "样式美观大方，无缝对接 Naive Ui，随意组合页面，随心所欲",
    icon: "style",
    bgName: "blue",
  },
  {
    title: "布局方案",
    content: "丰富的布局模式，具有高可配性，满足您的各类布局需求",
    icon: "layout",
    bgName: "pur",
  },
  {
    title: "技术支持",
    content: "优质的售后技术支持，完善的文档，让您事半功倍",
    icon: "tech",
    bgName: "yellow",
  },
];
const specialList = [
  {
    title: "最新技术栈",
    content: "基于Vue3、Vite、TypeScript、NaiveUI、Vuex等最新技术栈开发",
    icon: "book",
    bgName: "red",
  },
  {
    title: "轻量快速的热重载",
    content: "无论应用程序大小如何，都始终极快的模块热重载（HMR）",
    icon: "style",
    bgName: "blue",
  },
  {
    title: "丰富的示例",
    content: "常见的Web端插件示例实现",
    icon: "layout",
    bgName: "pur",
  },
  {
    title: "组件封装",
    content: "对日常使用频率较高的组件二次封装,满足基础工作需求",
    icon: "tech",
    bgName: "yellow",
  },
  {
    title: "主题配置",
    content: "丰富的主题配置及黑暗主题适配",
    icon: "other",
    bgName: "gray",
  },
  {
    title: "权限管理",
    content: "完善的前后端权限管理方案",
    icon: "permission",
    bgName: "pink",
  },
];
const onPreview = () => {
  window.open("http://www.lyjmm.cn/vue-admin-work/");
};
const router = useRouter();
function onPermission() {
  router.push("/permission");
}
</script>

<style lang="scss" scoped>
@media screen and (max-width: 960px) {
  .main-wrapper {
    .sub-title {
      width: 90% !important;
    }
    .img-wrapper {
      width: 100% !important;
      min-height: 0px !important;
    }
    .card-wrapper {
      display: block !important;
      margin: 20px;
      .card {
        width: 90% !important;
        margin: 0 auto !important;
      }
      .card + .card {
        margin-top: 20px !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }
    }
    .card-1-wrapper {
      display: block !important;
      .card1 {
        display: block !important;
        width: 90% !important;
        margin-right: auto !important;
        margin-left: auto !important;
        margin-top: 20px !important;
      }
    }
    .footer-wrapper {
      font-size: 12px !important;
    }
  }
}
.main-wrapper {
  .main-header-wrapper {
    display: flex;
    height: calc(100vh - 63px);
    width: 100%;
    align-items: center;
    background-color: var(--color);
    position: relative;
    .left-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 40%;
      margin: 0 auto;
      border-radius: 5px;
      z-index: 2;
      .title {
        font-weight: bold;
        font-size: 50px;
        text-align: center;
        padding: 20px;
      }
      .sub-title {
        cursor: pointer;
        text-align: center;
        margin: 0 auto;
        font-size: 14px;
      }
      .button-wrapper {
        margin: 10px !important;
      }
      .input {
        margin-top: 5%;
        background-color: rgba($color: #000000, $alpha: 0);
        :deep(.n-input__input-el) {
          color: var(--color) !important;
        }
      }
    }
    .right-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba($color: #000, $alpha: 0.6);
      }
      .img-wrapper {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        text-align: center;
      }
    }
  }
  .card-wrapper {
    display: flex;
    margin: 20px;
    .card {
      width: 25%;
    }
    .card + .card {
      margin-left: 20px;
    }
  }
  .icon-wrapper {
    position: relative;
    text-align: center;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    .icon {
      position: relative;
      z-index: 1;
    }
    .bg {
      border-radius: 50%;
      z-index: 0;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    .bg_red {
      background-color: rgba($color: #f00, $alpha: 0.5);
    }
    .bg_pur {
      background-color: rgba($color: rgb(162, 0, 255), $alpha: 0.5);
    }
    .bg_blue {
      background-color: rgba($color: rgb(55, 0, 255), $alpha: 0.5);
    }
    .bg_yellow {
      background-color: rgba($color: rgb(255, 230, 0), $alpha: 0.5);
    }
    .bg_pink {
      background-color: rgba($color: rgb(255, 0, 200), $alpha: 0.5);
    }
    .bg_gray {
      background-color: rgba($color: rgb(5, 214, 197), $alpha: 0.5);
    }
  }
  .h-title {
    text-align: center;
  }

  .card-title {
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    margin-top: 10px;
  }
  .card-content {
    margin-top: 10px;
    font-size: 14px;
    text-align: center;
  }
  .card-1-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 20px;
    overflow: hidden;
    .card1 {
      width: 49%;
      margin-right: 1%;
      margin-bottom: 1%;
    }
  }
  .footer-wrapper {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
  }
}
</style>
